<template>
  <div class="common-layout">
    <el-container class="container">
      
      <el-aside width="210px">
        <img src="@/assets/logo1.png"/>
        <el-menu :default-openeds="['5']" :unique-opened="true" :router="true">
        
          <el-menu-item index="ybp">
            <template #title> <el-icon> <Odometer /> </el-icon>
            <span>仪表盘 </span>
            </template>
          </el-menu-item>
          <el-sub-menu index="tzsz">
            <template #title> <el-icon><Menu /> </el-icon>
            <span> 通常设置</span> </template>
            <el-menu-item-group>
             
              <el-menu-item index="jsgl">教师管理</el-menu-item>
              <el-menu-item index="xsgl">学生管理</el-menu-item>
              <el-menu-item index="gggl">公告管理</el-menu-item>
              <el-menu-item index="xtpz">系统配置</el-menu-item>
              <el-menu-item index="ptfwq">判断服务器</el-menu-item>

            </el-menu-item-group>
          </el-sub-menu>
        
          <el-sub-menu index="wt">
            <template #title>

              <el-icon> <Aim /></el-icon>
              <span> 问题 </span></template>
              <el-menu-item-group>
                <el-menu-item index="wtlb">问题列表</el-menu-item>
                <el-menu-item index="zjtm">增加题目</el-menu-item>
                <el-menu-item index="drdctm">导入导出题目</el-menu-item>
              </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="bslx">
            <template #title>
              <el-icon> <Trophy /> </el-icon>
              <span> 比赛,联系 </span>
            </template>
            <el-menu-item-group>
               <el-menu-item index="bslb">比赛列表</el-menu-item>
               <el-menu-item index="cjbs">创建比赛</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="kc">
            <template #title>
              <el-icon> <Collection /> </el-icon>
              <span> 课程 </span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="kclb">课程列表</el-menu-item>
              <el-menu-item index="cjkc">创建课程</el-menu-item>

            </el-menu-item-group>
          </el-sub-menu>
      
        </el-menu>
      </el-aside>

    <el-container>
      <el-header>
      
        
        <el-dropdown size="large">
          <span class="el-dropdown-link">
            username <el-icon class="el-icon--right">
              <Arrow-down />
              </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-icon> <Share /></el-icon>
        <el-icon> <Search /></el-icon>
        </el-header>
        <el-main><router-view /> </el-main>
        <el-footer>
          <el-footer> Build Version :20210929bd</el-footer>
        </el-footer>
      
        
        </el-container>
    </el-container>
    </div>
</template>



<script>

 import {Odometer,Menu,Aim,Trophy,Collection,InfoFilled,Share,Search,ArrowDown} from '@element-plus/icons-vue'
 export default{
   name:'HelloWord',
   components:{
     Odometer,Menu,Aim,Trophy,Collection,InfoFilled,Share,Search,ArrowDown
   },
   methods:{
     

     }
   }
 


</script>
<style scoped>
.common-layout, .container {
 position: absolute;
 width: 100%; height: 100%;
}
.el-aside > div {
    width: 100%;
 height: 20%;
 vertical-align: middle;
 text-align: center;
}
.el-aside > div > img {
   width: 50%;
 height:80%;


}.el-header{
  background-color: #F9FAFC;
}
.el-header >i{
  margin-top: 15px;
  margin-right: 15px;

}
.el-header > .el-dropdown{
  margin-top: 15px;
}
.el-header>.el-dropdown,.el-header >i{
  float: right;
}
.el-dropdown-link{
  font-size: 23px;
  font-weight: bolder;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.el-header,.el-footer {
  background-color: #F9FAFC;
  color: var(--el-text-color-primary);
  text-align: center;

}


.el-main,.el-footer{
  background-color:#EDECEC ;
}

</style>
